@import "../../../common/css/size.scss";

.modal-bg.modal-msg.main {
  z-index: 9999;
  background: rgba(85, 85, 85, .5);
  position: absolute;
}

.modal-bg.modal-msg.main .container, .modal-bg.modal-msg.global .container {
  width: $_500;
  min-height: $_200;
  margin-top: 35%;
  background: #fff;
  box-shadow: 0 $_7 $_15 rgba(0, 0, 0, .19);
  border-top: $_8 solid #3fb8e0;
  padding: 0;
}

.modal-bg.modal-msg.main .container.error {
  border-top: $_8 solid #fc5c1d;
  .title{
    color: #fc5c1d!important;
  }
}
.modal-bg.modal-msg.main .container.warn {
  border-top: $_8 solid #fc7814;

  .title{
    color: #fc7814!important;
  }
}

.modal-bg.modal-msg.main .container {
  .title {
    margin-top: 0.2rem;
    text-align: left;
    line-height: $_50;
    height: $_50;
    font-size: $_20;
    color: #3fb8e0;
    padding-left: 0;
    img {
      width: 0.8rem;
    }
  }
  .close {
    margin-right: $_10;
    font-size: $_35;
  }

}

.modal-bg.modal-msg.main .container .content {
  height: $_50;
  margin-top: $_20;
  text-align: center;
  color: #333;
  font-size: $_22;
}

.modal-bg.modal-msg.main .container .content > img {
  width: 1rem;
  margin: 0 $_5;
}

.modal-bg.modal-msg.main .other {
  margin-top: $_10;
  text-align: center;
}

.modal-bg.modal-msg.main .other a {
  float: none;
  font-size: $_18;
}

/*全局弹框*/
.modal-bg.modal-msg.global {
  z-index: 9000;
}

.modal-bg.modal-msg.main {
  z-index: 9000;
  background: rgba(85, 85, 85, .5);
  position: absolute;
}

/*小提示框*/
.modal-bg.modal-msg.top {
  z-index: 9999;
  background: rgba(85, 85, 85, 0) !important;
}

.modal-bg.modal-msg.top .container {
  width: $_500;
  margin-top: $_12;
  background: #fff;
  box-shadow: 1px 6px 8px 7px rgba(0, 0, 0, .19);
  border-bottom: 3px solid #3fb8e0;
  border-radius: $_32;
  padding: 0;
  text-align: center;
}

.modal-bg.modal-msg .container {
  margin-top: 15%;
  background: #fff;
  box-shadow: 0 7px 15px rgba(0, 0, 0, .19);
  padding: 0;
  text-align: center;
}

.modal-bg.modal-msg.top .container .content {
  /*float: left;*/
  position: relative;
}

.modal-bg.modal-msg.top .container .content > img {
  width: $_27;
  position: absolute;
  left: 0;
}

/*******/

.modal-bg.modal-msg .container.error {
  border-top: 3px solid #fc5c1d;
}

.modal-bg.modal-msg .container .title {
  text-align: left;
  width: $_345;
  line-height: $_50;
  height: $_50;
  font-size: $_16;
  color: #3fb8e0;
  padding-left: $_15;
}

//
.modal-bg.modal-msg .container.error .title {
  color: #fc5c1d;
}

//
.modal-bg.modal-msg .container .content {
  line-height: $_40;
  text-align: center;
  color: #333;
  font-size: $_20;
  //margin-right: $_20;
  padding:0 $_20 0 $_10
}



.modal-bg.modal-msg.main .container .content, .show.modal-bg.modal-msg .global .container .content {
  height: $_40;
  margin-top: 0.1rem;
  font-size: 0.45rem;
}

.modal-bg.modal-msg .container .content > img {
  margin: 0 $_10;
  width: 1.3rem;
}

.modal-bg.modal-msg .other {
  margin-top: $_10;
  text-align: center;
}

.modal-bg.modal-msg .other a {
  float: none;
  font-size: $_12;
}

.modal-bg.modal-msg.global .container .bottom ul li {
  //width: $_80;
  height: $_20;
  line-height: $_20;
  margin: 0 $_15;
  border: 1px solid #3fb8e0;
  /*border-radius: 4px;*/
  color: #3fb8e0;
  cursor: pointer;
  display: inline;
  padding: 2% 15%;

}
.modal-bg.modal-msg.global .container .bottom ul.download-ul li{
  padding: 2% 10%;
}

.modal-bg.modal-msg.global .container .bottom ul li.active {
  background-color: #3fb8e0;
  color: #fff;
}

.modal-bg.modal-msg.global .container .bottom ul li:hover {
  background-color: #2cabda;
  color: #fff;
  opacity: 1;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.modal-bg.modal-msg.global .container .bottom {
  margin-top: $_60;
  padding-bottom: $_20;
}

 > div {
  width: calc(100% - 1.5rem);
  display: inline-block;
  line-height: 1rem;
  //text-align: left;
}

/*升级样式*/

.modal-bg.modal-msg .container.level-up {
  border: none;
  background: none;
  box-shadow: none;
  width: auto;
  margin-top: 20%;
  height: 100%;
}

.modal-bg.modal-msg .container.level-up .close {
  margin-right: $_150;
  background-color: #fff;
  position: relative;
  z-index: 2;
}

.sj-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
}

.sj-container .wrapper {
  width: $_300;
  height: $_300;
  position: relative;
  margin-left: -$_150;
  left: 50%;
  margin-top: 0;
  /*background: #3fb8e0;*/
}

.sj-content {
  position: relative;
  background-image: url(../img/bg-sj.png);
  background-repeat: no-repeat;
  background-size: $_260;
  height: $_260;
  width: $_260;
  -webkit-animation: bg-anim 3.5s 0s infinite ease-out;
  -o-animation: bg-anim 3.5s 0s infinite ease-out;
  animation: bg-anim 3.5s 0s infinite ease-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#sj-text1 {
  position: absolute;
  background-image: url(../img/icon-text-sheng.png);
  background-repeat: no-repeat;
  background-size: $_50;
  width: $_50;
  height: $_50;
  top: $_118;
  z-index: 1;
  margin-left: -$_85;
  -webkit-animation: font1-anim 1.5s 0.2s infinite ease-out;
  -o-animation: font1-anim 1.5s 0.2s infinite ease-out;
  animation: font1-anim 1.5s 0.2s infinite ease-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#sj-text2 {
  position: absolute;
  background-image: url(../img/icon-text-ji.png);
  background-repeat: no-repeat;
  background-size: $_50;
  width: $_50;
  height: $_50;
  top: $_105;
  z-index: 2;
  margin-left: -$_24;
  -webkit-animation: font2-anim 1.5s .6s infinite ease-out;
  -o-animation: font2-anim 1.5s .6s infinite ease-out;
  animation: font2-anim 1.5s .6s infinite ease-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

#sj-text3 {
  position: absolute;
  background-image: url(../img/icon-text-le.png);
  background-repeat: no-repeat;
  background-size: $_42;
  width: $_50;
  height: $_50;
  top: $_122;
  z-index: 1;
  margin-left: $_43;
  -webkit-animation: font3-anim 1.5s 1s infinite ease-out;
  -o-animation: font3-anim 1.5s 1s infinite ease-out;
  animation: font3-anim 1.5s 1s infinite ease-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.js-bottom {
  position: absolute;
  background-image: url(../img/icon-star-white.png);
  background-repeat: no-repeat;
  background-size: $_70;
  width: $_70;
  height: $_70;
  top: $_175;
  margin-left: $_97;
}

#sj-text4 {
  text-align: center;
  font-size: $_30;
  line-height: $_70;
  width: $_48;
  color: #FFC107;
  font-weight: bold;
  text-shadow: 0 0 $_1 #716e6e;
}

/* 星星 动画*/
.star-note {
  position: absolute;
  color: #fcd958;
  width: $_1;
  left: 50%;
  opacity: 0;
  text-shadow: 0 0 $_20 #fcd958;
}

.dust-note {
  position: absolute;
  color: #FCB040;
  width: $_1;
  left: 50%;
  opacity: 0;
}

.star-note#star1 {
  margin-left: -$_80;
  top: 60%;
  -webkit-animation: star1-anim 1.6s 1.1s infinite ease-out;
  -o-animation: star1-anim 1.6s 1.1s infinite ease-out;
  animation: star1-anim 1.6s 1.1s infinite ease-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /*-webkit-animation: star1-anim 1.5s 0.5s infinite ease;*/
  /*-webkit-animation-fill-mode: forwards;*/
}

.star-note#dust1 {
  color: #ff6c3a;
  margin-left: -$_60;
  top: 50%;
  -webkit-animation: dust1-anim 1.6s 1.2s infinite ease-in;
  -o-animation: dust1-anim 1.6s 1.2s infinite ease-in;
  animation: dust1-anim 1.6s 1.2s infinite ease-in;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.star-note#star2 {
  margin-left: -$_100;
  top: 40%;
  -webkit-animation: star2-anim 1.8s 1.4s infinite ease-out;
  -o-animation: star2-anim 1.8s 1.4s infinite ease-out;
  animation: star2-anim 1.8s 1.4s infinite ease-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /*-webkit-animation: star1-anim 1.5s 0.5s infinite ease;*/
  /*-webkit-animation-fill-mode: forwards;*/
}

.star-note#dust2 {
  margin-left: -$_60;
  top: 40%;
  -webkit-animation: dust2-anim 1.8s .5s infinite ease;
  -o-animation: dust2-anim 1.8s .5s infinite ease;
  animation: dust2-anim 1.8s .5s infinite ease;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.star-note#star3 {
  color: #ff6c3a;
  margin-left: $_50;
  top: 30%;
  -webkit-animation: star3-anim 1.2s .9s infinite ease-out;
  -o-animation: star3-anim 1.2s .9s infinite ease-out;
  animation: star3-anim 1.2s .9s infinite ease-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /*-webkit-animation: star1-anim 1.5s 0.5s infinite ease;*/
  /*-webkit-animation-fill-mode: forwards;*/
}

.star-note#dust3 {
  margin-left: $_20;
  top: 40%;
  -webkit-animation: dust3-anim 2.6s infinite ease;
  -o-animation: dust3-anim 2.6s infinite ease;
  animation: dust3-anim 2.6s infinite ease;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.star-note#star7 {
  width: $_70;
  line-height: $_70;
  margin-left: $_38;
  top: $_244;
  font-size: $_80;
  display: table;
  -webkit-animation: star7-anim 2s 0.5s infinite ease;
  -o-animation: star7-anim 2s 0.5s infinite ease;
  animation: star7-anim 2s 0.5s infinite ease;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@mixin keyframes($animname) {
  @keyframes #{$animname} {
    @content;
  }
  @-webkit-keyframes #{$animname} {
    @content;
  }
}

@include keyframes(star7-anim) {
  0% {
    text-shadow: 0 0 $_5 #fcd958;
    opacity: 0;
    font-size: $_10;
  }
  50% {
    opacity: 1;
    font-size: $_60;
    /*transform: rotate(200deg);*/
    text-shadow: 0 0 $_60 #fcd958;
  }
  100% {
    opacity: 0;
    font-size: $_10;
    /*transform: rotate(400deg);*/
    text-shadow: 0 0 $_5 #fcd958;
  }
}

@include keyframes(star1-anim) {
  0% {
    opacity: 0;
    font-size: $_30;
    -webkit-transform: rotate(150deg) translate(0, 0);
    -moz-transform: rotate(150deg) translate(0, 0);
    -ms-transform: rotate(150deg) translate(0, 0);
    -o-transform: rotate(150deg) translate(0, 0);
    transform: rotate(150deg) translate(0, 0);
  }
  45% {
    opacity: 2;
    font-size: $_80;
    text-shadow: 0 0 $_60 #fcd958;
  }
  100% {
    opacity: 0;
    font-size: $_50;
    -webkit-transform: rotate(20deg) translate(-$_210, 7.5rem);
    -moz-transform: rotate(20deg) translate(-$_210, 7.5rem);
    -ms-transform: rotate(20deg) translate(-$_210, 7.5rem);
    -o-transform: rotate(20deg) translate(-$_210, 7.5rem);
    transform: rotate(20deg) translate(-$_210, 7.5rem);
  }
}

@include keyframes (dust1-anim) {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(-25deg) translate(-11rem, $_20);
    -moz-transform: rotate(-25deg) translate(-11rem, $_20);
    -ms-transform: rotate(-25deg) translate(-11rem, $_20);
    -o-transform: rotate(-25deg) translate(-11rem, $_20);
    transform: rotate(-25deg) translate(-11rem, $_20);
  }
}

@include keyframes (star2-anim) {
  0% {
    opacity: 0;
    font-size: $_30;
    -webkit-transform: rotate(100deg) translate(0, 0);
    -moz-transform: rotate(100deg) translate(0, 0);
    -ms-transform: rotate(100deg) translate(0, 0);
    -o-transform: rotate(100deg) translate(0, 0);
    transform: rotate(100deg) translate(0, 0);
  }
  45% {
    opacity: 2;
    font-size: $_60;
  }
  100% {
    opacity: 0;
    font-size: $_40;
    -webkit-transform: rotate(10deg) translate(-$_210, $_10);
    -moz-transform: rotate(10deg) translate(-$_210, $_10);
    -ms-transform: rotate(10deg) translate(-$_210, $_10);
    -o-transform: rotate(10deg) translate(-$_210, $_10);
    transform: rotate(10deg) translate(-$_210, $_10);
  }
}

@include keyframes (dust2-anim) {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(10deg) translate(-$_200, -$_120);
    -moz-transform: rotate(10deg) translate(-$_200, -$_120);
    -ms-transform: rotate(10deg) translate(-$_200, -$_120);
    -o-transform: rotate(10deg) translate(-$_200, -$_120);
    transform: rotate(10deg) translate(-$_200, -$_120);
  }
}

@include keyframes (star3-anim) {
  0% {
    opacity: 0;
    font-size: $_10;
    -webkit-transform: rotate(-120deg) translate(0, 0);
    -moz-transform: rotate(-120deg) translate(0, 0);
    -ms-transform: rotate(-120deg) translate(0, 0);
    -o-transform: rotate(-120deg) translate(0, 0);
    transform: rotate(-120deg) translate(0, 0);
  }
  45% {
    opacity: 2;
    font-size: $_40;
  }
  100% {
    opacity: 0;
    font-size: $_20;
    -webkit-transform: rotate(10deg) translate($_150, $_110);
    -moz-transform: rotate(10deg) translate($_150, $_110);
    -ms-transform: rotate(10deg) translate($_150, $_110);
    -o-transform: rotate(10deg) translate($_150, $_110);
    transform: rotate(10deg) translate($_150, $_110);
  }
}

@include keyframes (dust3-anim) {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(50deg) translate($_130, -$_220);
    -moz-transform: rotate(50deg) translate($_130, -$_220);
    -ms-transform: rotate(50deg) translate($_130, -$_220);
    -o-transform: rotate(50deg) translate($_130, -$_220);
    transform: rotate(50deg) translate($_130, -$_220);
  }
}

/*文字动画*/
@include keyframes (bg-anim) {
  33% {
    transform: rotate(-2deg);
  }
  66% {
    transform: rotate(3deg);
  }
}

@include keyframes (font1-anim) {
  0% {
    text-shadow: 0 0 $_5 #fcd958;
  }
  20% {
    transform: rotate(-20deg);
    background-size: $_55;
    width: $_55;
    height: $_55;
  }
  50% {
    transform: rotate(10deg);
  }
}

@include keyframes (font2-anim) {
  0% {
    text-shadow: 0 0 $_5 #fcd958;
  }
  20% {
    /*transform: rotate(12deg);*/
    background-size: $_58;
    width: $_58;
    height: $_58;
  }
  50% {
    /*transform: rotate(-7deg);*/
  }
}

@include keyframes (font3-anim) {
  0% {
    text-shadow: 0 0 $_5 #fcd958;
  }
  20% {
    transform: rotate(15deg);
    background-size: $_47;
    width: $_55;
    height: $_55;
  }
  50% {
    transform: rotate(-8deg);
  }
}
